<template>
  <div class="home">
    <div class="stat">
      <!--用户卡片-->
      <div class="stat-user">
        <div class="stat-user__title">鉴评云系统</div>
        <div class="stat-user__detail">
          <p>欢迎您，{{ username }}</p>
          <p>当前时间：{{ nowTime }}</p>
        </div>
        <img class="stat-user__portrait" :src="userphoto" alt="头像" />
      </div>
      <!--系统统计数据概览-->
      <div class="stat-info">
        <el-row :gutter="20" v-for="(info, index) in stat" :key="index">
          <el-col :span="8" v-for="(item, index) in info" :key="index">
            <div class="stat-info__item">
              <div class="stat-info__icon" :style="{ 'background-color': item.bgColor }">
                <i :class="item.icon"></i>
              </div>
              <div class="stat-info__detail">
                <p class="stat-info__total">{{ item.total }}</p>
                <p class="stat-info__title">{{ item.title }}</p>
              </div>
            </div>
          </el-col>
          <el-col v-if="index == 0" :span="8">
            <div class="stat-info__item">
              <div class="stat-info__icon" style="background-color: #67c4ed">
                <i class="el-icon-document"></i>
              </div>
              <div class="stat-info__detail">
                <p class="stat-info__total" @click="goWord">
                  <a>{{ "标准化文档" }}</a>
                </p>
              </div>
            </div>
          </el-col>
          <el-col v-if="index == 1" :span="8">
            <div class="stat-info__item">
              <div class="stat-info__icon" style="background-color: #ebcc6f">
                <i class="el-icon-search"></i>
              </div>
              <div class="stat-info__detail">
                <p class="stat-info__total" @click="getEPC">
                  <a>{{ "EPC 查询" }}</a>
                </p>
              </div>
            </div>
          </el-col>
          <el-col v-if="index == 1" :span="8">
            <div class="stat-info__item">
              <div class="stat-info__icon" style="background-color: #ebcc6f">
                <i class="el-icon-document"></i>
              </div>
              <div class="stat-info__detail">
                <p class="stat-info__total" @click="getwdgd">
                  <a>{{ "文档归档" }}</a>
                </p>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <el-carousel :interval="3000" type="card" height="300px">
      <div v-for="(item, key) in lbImg" :key="key">
        <el-carousel-item>
          <img :src="item.style" class="medium" @click="goLbt(item.url)" />
        </el-carousel-item>
      </div>
    </el-carousel>
    <el-row :gutter="20" class="margin-t-20 list">
      <!--合作企业-->
      <el-col :span="12">
        <div class="el-card-div">
          <el-card style="width: 105%">
            <div slot="header">
              <span><i class="el-icon-tickets margin-r-5"></i>合作企业</span>
            </div>
            <div class="imgDiv">
              <div v-for="(item, key) in logoList" :key="key">
                <div class="imgLogoDiv">
                  <el-tooltip :content="item.partnername" placement="top" effect="light">
                    <img :src="item.url" :alt="item.partnername" class="imgLogo" @click="gocompany(item.jump)" />
                  </el-tooltip>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
      <!--系统公告-->
      <el-col :span="12">
        <el-card class="right">
          <el-tabs tab-position="top" ref="tabs" style="height: 100%">
            <el-tab-pane label="内部">
              <p v-for="(item, i) in nbList" :key="i" class="noticeDiv">
                <el-button type="text" class="latest-new-list__title" @click="noticeView(item)">{{ item.name
                }}</el-button>
                <span class="latest-new-list__time">{{ item.createTime }}</span>
              </p>
            </el-tab-pane>
            <el-tab-pane label="学术">
              <p v-for="(item, i) in xsList" :key="i" class="noticeDiv">
                <el-button type="text" class="latest-new-list__title" @click="noticeView(item)">{{ item.name
                }}</el-button>
                <span class="latest-new-list__time">{{ item.createTime }}</span>
              </p>
            </el-tab-pane>
            <el-tab-pane label="通知">
              <p v-for="(item, i) in tzList" :key="i" class="noticeDiv">
                <el-button type="text" class="latest-new-list__title" @click="noticeView(item)">{{ item.name
                }}</el-button>
                <span class="latest-new-list__time">{{ item.createTime }}</span>
              </p>
            </el-tab-pane>
            <el-tab-pane label="招标">
              <p v-for="(item, i) in zbList" :key="i" class="noticeDiv">
                <el-button type="text" class="latest-new-list__title" @click="noticeView(item)">{{ item.name
                }}</el-button>
                <span class="latest-new-list__time">{{ item.createTime }}</span>
              </p>
            </el-tab-pane>
          </el-tabs>
          <el-button type="text" class="pull-right more" @click="moreNotice">更多公告 ></el-button>
        </el-card>
      </el-col>
    </el-row>
    <div class="footer" style="width: 100%;background-color: #333;position: absolute;right: 0px;margin-top: 15px;">
      <p style="color: #ddd;text-align: center;line-height: 80px;font-size: 14px;">
        鉴评云评估管理系统 V1.0 Copyright &copy; 版权所有 车查查科技有限公司
      </p>
    </div>
    <systemcontent ref="systemcontent" v-if="noticeDia" :isShow="noticeDia" :record="noticeFile" @close="dialogClose">
    </systemcontent>
  </div>
</template>

<script>
import Util from "@/assets/js/util";
import { plogo } from "@/api/systemManage/logoManage";
import { findNoticeAll } from "@/api/systemManage/noticeManage";
import { color, time } from "echarts";
import systemcontent from "@/view/jdpg/dayWork/systemNotice/systemcontent.vue";
import { selectAll } from "@/api/systemManage/carouselChartManage";
import router from "@/router";
import { ajNumber } from "@/api/home";
let todoList = [],
  latestNewList = [];
for (let i = 0; i < 8; i++) {
  todoList.push({
    title: `今天需要做的待办事项咯~~~`,
    isChecked: false,
  });
  // latestNewList.push({
  //   time: new Date(new Date().getTime() + i * 24 * 3600 * 1000).Format('yyyy-MM-dd'),
  //   title: `今日的最新新闻来咯~~~`
  // });
}
export default {
  components: { systemcontent },
  name: "Home",
  data () {
    return {
      userphoto: "",
      lbImg: [],
      logoList: [],
      nbList: [],
      xsList: [],
      tzList: [],
      zbList: [],
      noticeDia: false,
      noticeFile: {},

      stat: [
        [
          {
            icon: "el-icon-edit-outline",
            title: "待审核",
            total: 0,
            bgColor: "#ebcc6f",
          },
          {
            icon: "el-icon-folder-checked",
            title: "已通过",
            total: 0,
            bgColor: "#3acaa9",
          },
        ],
        [
          {
            icon: "el-icon-edit-outline",
            title: "历史订单数",
            total: 9397,
            bgColor: "#af84cb",
          },
        ],
      ],
      username: localStorage.getItem("username"),
      nowTime: new Date().Format("yyyy-MM-dd hh:mm:ss"),
      todoList,
      latestNewList,
    };
  },
  methods: {
    getNumber () {
      this.userphoto = localStorage.getItem("userPhoto");
      let obj = { ptime: "", ppgs: "", pqyid: 0 };
      let now = new Date();
      obj.ptime = now.getFullYear();
      obj.ptime = obj.ptime.toString();
      obj.ppgs = localStorage.getItem("username");
      obj.pqyid =
        localStorage.getItem("role") === "系统管理员"
          ? 0
          : Number(localStorage.getItem("companyId"));

      ////console.log("企业id： " + localStorage.getItem("role"));
      ajNumber(obj).then((res) => {
        this.stat[0][0].total = res.data.dsh;
        this.stat[0][1].total = res.data.ytg;
      });
    },
    setNowTime () {
      setInterval(() => {
        this.nowTime = new Date().Format("yyyy-MM-dd hh:mm:ss");
      }, 1000);
    },
    addNewTodoItem () {
      this.$prompt("请输入待办事项主题", "新增待办事项", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          this.$message({
            type: "success",
            message: "新增待办事项成功",
          });
          this.todoList.unshift({
            title: value,
            isChecked: false,
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消新增待办事项",
          });
        });
    },
    goLbt (url) {
      this.$router.push(url);
    },
    goWord () {
      // this.$router.push("/textFile");
      if (localStorage.getItem('role') == '系统管理员') {
        this.$router.push("/fileManage");
      } else {
        this.$router.push("/textFile");
      }
    },
    getEPC () {
      let newPage = this.$router.resolve({ path: "/EPC" });
      window.open(newPage.href, "_blank");
    },
    getwdgd () {
      this.$router.push({ path: "/document" });
    },
    getLbt () {
      selectAll().then((res) => {
        if (res) {
          this.lbImg = [];
          res.data.forEach((item, key) => {
            if (item.remark == "true") {
              this.lbImg.push(item);
            }
          });
        }
      });
    },
    getlogo () {
      plogo().then((res) => {
        for (let i = 0; i < res.data.length; i++) {
          if (res.data[i].status == true) {
            this.logoList.push(res.data[i]);
          }
        }
      });
    },
    gocompany (url) {
      window.open(url, "_blank");
    },
    noticeByAll (arr, str) {
      findNoticeAll({ type: str, pageNum: 1, pageSize: 100 }).then((res) => {
        if (res) {
          for (let i = 0; arr.length < 6; i++) {
            if (res.data.list[i].status == 0) {
              let time = res.data.list[i].createTime.toString();
              time = time.substring(0, 10);
              arr.push({
                name: res.data.list[i].name,
                createTime: time,
                content: res.data.list[i].content,
                type: res.data.list[i].type,
              });
            }
          }
        }
      });
    },
    getList () {
      this.nbList = [],
        this.xsList = [],
        this.tzList = [],
        this.zbList = [],
        this.noticeByAll(this.nbList, '内部公告')
      this.noticeByAll(this.xsList, '学术活动')
      this.noticeByAll(this.tzList, '通知公告')
      this.noticeByAll(this.zbList, '招标公告')
    },
    moreNotice () {
      this.$router.push("/systemNotice");
    },
    dialogClose () {
      this.noticeDia = false;
    },
    noticeView (item) {
      this.noticeFile = item;
      this.noticeDia = true;
    },
  },
  mounted () {
    this.getNumber();
    this.setNowTime();
    this.getLbt();
    this.getlogo();
    this.getList();
    this.$nextTick(() => {
      this.$refs.tabs.$refs.nav.$nextTick(() => {
        // 此时tab的nav才渲染dom 否则拿不到el-tabs__item
        var target = document.getElementsByClassName("el-tabs__item");
        let that = this;
        for (let i = 0; i < target.length; i++) {
          target[i].addEventListener("mouseover", () => {
            that.$refs.tabs.handleTabClick(1, String(i));
          });
        }
      });
    });
  },
};
</script>

<style scoped lang="less">
.home {
  height: calc(~"100% - 40px");
}

.stat {
  display: flex;
  height: 230px;
}

.stat-user {
  position: relative;
  width: 300px;
  background-color: #f5f5f5;
  box-shadow: 2px 2px 5px #ccc;
}

.stat-user__title {
  height: 100px;
  background-color: #2eb3ff;
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 70px;
}

.stat-user__detail {
  padding-top: 50px;
  color: #666;
  font-size: 13px;
  text-align: center;
}

.stat-user__portrait {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 0 5px #ccc;
  margin-top: -55px;
  margin-left: -40px;
}

.stat-info {
  flex: 1;
  margin-left: 20px;
}

.el-row+.el-row {
  margin-top: 10px;
}

.stat-info__item {
  display: flex;
  height: 110px;
  box-shadow: 2px 2px 5px #ccc;
  background-color: #f5f5f5;
}

.stat-info__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  color: white;

  [class*="el-icon"] {
    font-size: 50px;
  }
}

.stat-info__detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.stat-info__total {
  color: #0085d0;
  font-size: 27px;
  font-weight: bold;
}

.stat-info__title {
  color: #666;
  font-size: 12px;
}

.list {
  display: flex;
  height: calc(~"100% - 250px");

  .el-col {
    height: 100%;
  }
}

.el-card-div {
  height: 100%;
  padding: 0;
  overflow: hidden;
}

.el-card {
  height: 100%;
  background-color: #fafafa;
  padding-top: 10px;
  overflow: auto;

  .el-icon-plus {
    float: right;
    color: #f56c6c;
    font-weight: bold;
    cursor: pointer;
  }
}

.right {
  overflow: hidden;
}

.el-card__header span {
  color: #3b7459;
}

.el-card__body {
  p {
    border-bottom: 1px solid #e5e5e5;
    background-color: #fafafa;
    color: #555;
    font-size: 14px;
    line-height: 30px;
  }

  .active {
    color: #666;
    text-decoration: line-through;
  }
}

.latest-new-list__time {
  color: #666;
  font-size: 13px;
}

.latest-new-list__title {
  color: #666;
  font-size: 14px;
}

/deep/ .el-card__header {
  padding: 10px 20px 10px;
}

/deep/ .el-carousel__button {
  border-radius: 50%;
  background-color: #666;
  width: 6px;
  height: 6px;
}

.el-card-div /deep/ .el-card__body {
  padding: 10px 40px 20px 20px;
}

.right /deep/ .el-card__body {
  padding-top: 0px;
}

.noticeDiv {
  display: flex;
  justify-content: space-between;
}

.more {
  color: #555;
  position: absolute;
  bottom:0;
  right: 25px ;
}

/deep/ .el-tabs__item {
  width: 25%;
  text-align: center;
  font-size: 15px;
  color: #3b7459;
}

/deep/ .el-tabs__header {
  margin-bottom: 5px;
}

/deep/ .el-tabs__nav {
  float: none;
}

.imgDiv {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-flow: wrap;
}

.imgLogoDiv {
  width: 120px;
  height: 120px;
  background: #999;
  margin-top: 10px;
  box-shadow: 0 0 5px #ccc;
  border-radius: 10px;
}

.imgLogo {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.el-carousel {
  margin-top: 20px;
}

.medium {
  background: #999;
  width: 100%;
  height: 100%;
  // object-fit: cover;
}
</style>
